<template>
  <div class="table-tools-column">
    <!-- 左侧按钮组 -->
    <base-table-btn-group></base-table-btn-group>
    <!-- 右侧搜索栏 -->
    <div v-if="searchShow" class="search-box-style">
      <el-input
        v-model="filterData.content"
        class="search-box"
        placeholder="请输入内容搜索"
        size="small"
        clearable
      >
        <template #prepend>
          <el-select
            style="width: 100px"
            v-model="filterData.field"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in filterField"
              :key="index"
              :label="item.label"
              :value="item.filedName"
            ></el-option>
          </el-select>
        </template>
      </el-input>
      <el-button-group>
        <el-button
          size="small"
          @click="basicSearch(filterData.field, filterData.content)"
          icon="Search"
          >搜索</el-button
        >
        <el-button size="small" @click="reset" icon="Refresh">重置</el-button>
      </el-button-group>
    </div>
  </div>
</template>

<script lang="ts" setup>
import BaseTableBtnGroup from "@/components/table/basic/BaseTableBtnGroup.vue";
import { inject, ref } from "vue";
import { TableField, TableUrl } from "@/models/TableSetting";

const searchShow = true;
const filterData = ref({
  field: "",
  content: "",
});

const props: {
  url: TableUrl;
  tableFieldList: Array<TableField>;
  submitForm: Record<string, unknown>;
} = inject("props") as {
  url: TableUrl;
  tableFieldList: Array<TableField>;
  submitForm: Record<string, unknown>;
};

const filterField = props.tableFieldList;

const basicSearch = inject("basicSearch") as (
  field: string,
  content: string | number
) => void;

const resetSearch = inject("resetSearch") as () => void;

// 重置搜索
const reset = () => {
  filterData.value = {
    field: "",
    content: "",
  };
  resetSearch();
};
</script>

<style scoped>
.table-tools-column {
  width: 100%;
  min-height: 50px;
}

.search-box-style {
  float: right;
}

.search-box {
  width: 280px;
}
</style>
